<template>
  <page width="800px">
    <template slot="toolbar">
      <ActionButton @click="resetCwd" icon="management-home" :size="20" />
      <div v-if="editingPath" class="path-edit">
        <Input
          ref="pathInput"
          class="path-input"
          v-model="editedPath"
          placeholder="路径"
          style="width: 300px"
          @on-keyup.esc="editingPath = false"
          @on-keyup.enter="submitPathEdit()"
        />
      </div>
      <div v-else class="path-edit">
        <template v-for="(folder,index) in folderCurrent.folders">
          <ActionButton
            :key="index"
            @click="openFolder(folder.path)"
            :content="folder.name"
          />
        </template>
        <div style="flex:1;" />
        <ActionButton @click="openPathEdit" icon="management-edit" :size="20" />
      </div>
      <ActionButton
        @click="refreshFolder"
        icon="management-refresh"
        :size="20"
      />
    </template>
    <template v-for="folder in foldersFavorite">
      <item
        :folder="folder"
        :key="folder.name"
        @management="openManage(folder)"
        @select="openFolder(folder.path)"
      />
    </template>
    <template slot="footbar">
      <Button
        @click="createNewProject"
        style="margin:8px 0"
        size="large"
        type="primary"
      >在此创建新项目</Button>
    </template>
  </page>
</template>

<script>
import { mapActions } from "vuex";
import Item from "./Item";
export default {
  components: {
    Item,
  },
  data() {
    return {
      loading: 0,
      error: false,
      editingPath: false,
      editedPath: "",
      // folderCurrent: {},
      foldersFavorite: [],
    };
  },
  computed: {
    folderCurrent() {
      const path = this.editedPath;
      const folders = path.split("/").filter((p) => !!p);
      return {
        path,
        folders: folders.map((p, i) => {
          return {
            name: p,
            path: "/" + folders.filter((a, b) => b <= i).join("/"),
          };
        }),
      };
    },
  },
  methods: {
    ...mapActions(["readdir", "userhome"]),

    openFolder(path) {
      this.editingPath = false;
      this.error = null;
      this.loading++;
      this.readdir({ source: path })
        .then((res) => {
          this.editedPath = path;
          this.foldersFavorite = [...res.data];
        })
        .catch((error) => {})
        .finally(() => {
          this.loading--;
        });
    },

    openManage(folder) {
      console.info(folder);
    },

    async openPathEdit() {
      this.editedPath = this.folderCurrent.path;
      this.editingPath = true;
      await this.$nextTick();
      this.$refs.pathInput.focus();
    },

    resetCwd() {
      this.userhome().then((res) => {
        this.editedPath = res.data;
        this.openFolder(this.editedPath);
      });
    },

    submitPathEdit() {
      this.openFolder(this.editedPath);
    },

    refreshFolder() {
      this.openFolder(this.folderCurrent.path);
    },

    createNewProject() {
      this.$router.push({
        name: "project-create",
        param: {
          path: this.editedPath,
        },
      });
    },
  },
  mounted() {
    this.resetCwd();
  },
};
</script>

<style lang="less" scoped>
.path-edit {
  flex: 100% 1 1;
  display: flex;
  align-items: center;
  margin: 0 4px;
  .action {
    margin-left: 2px;
    padding: 4px 8px;
  }
}
</style>
